<script setup lang="ts"></script>

<template>
  <div class="footer-bar">
    <div class="fixed-container">
      <ul class="footer-bar__content">
        <li><app-logo large /></li>
        <li>
          <dl class="footer-dl">
            <dt>条款</dt>
            <dd>
              <a href="/user-protocol" target="_blank"
                ><span class="text">用户协议</span></a
              >
            </dd>
          </dl>
        </li>
        <li v-if="telegramFirst || skypeFirst">
          <dl class="footer-dl">
            <dt>
              服务与支持
              <i-fb-serve />
            </dt>
            <dd class="footer-serve">
              <a
                v-if="telegramFirst"
                class="telegram"
                :href="telegramFirst"
                target="_blank"
              >
                <i-fb-telegram class="serve-icon" />
                <span class="text">Telegram客服</span>
              </a>
              <a
                v-if="skypeFirst"
                class="skype"
                :href="skypeFirst"
                target="_blank"
              >
                <i-fb-skype class="serve-icon" />
                <span class="text">Skype客服</span>
              </a>
            </dd>
          </dl>
        </li>
      </ul>
      <a-divider />
      <p class="text-xs text-center px-0 pb-4 m-0">{{ icp }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
interface IProps {
  telegramFirst?: string
  skypeFirst?: string
  icp?: string
}
withDefaults(defineProps<IProps>(), {})
</script>

<style lang="less" scoped>
@skype-internal-color: #e6e6e6;
@skype-external-color: #808080;
@skype-internal-color-hover: #1296dc;
@skype-external-color-hover: #fff;

@telegram-internal-color: #e6e6e6;
@telegram-external-color: #808080;
@telegram-internal-color-hover: #0fadf2;
@telegram-external-color-hover: #fff;

.footer-bar {
  @apply w-full pt-20;
  color: #80838a;

  a {
    @apply inline-flex items-center gap-x-2;
    text-decoration: none;
    color: #80838a;
    .text {
      border-bottom: 1px solid transparent;
    }
    &:hover {
      .text {
        border-bottom: 1px solid #808080;
      }
    }
  }
  .footer-bar__content {
    @apply list-none grid grid-cols-3 m-0;
    .footer-dl {
      dt {
        color: #020814;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 100% */
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      dd {
        margin-inline-start: 0;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 128.571% */
      }
      .footer-serve {
        @apply flex items-center;
        a {
          margin-right: 56px;
        }
        .serve-icon {
          width: 18px;
          height: 18px;
        }
        a.telegram {
          --internal-color: @telegram-internal-color;
          --external-color: @telegram-external-color;
          &:hover {
            --internal-color: @telegram-internal-color-hover;
            --external-color: @telegram-external-color-hover;
          }
        }

        a.skype {
          --internal-color: @skype-internal-color;
          --external-color: @skype-external-color;
          &:hover {
            --internal-color: @skype-internal-color-hover;
            --external-color: @skype-external-color-hover;
          }
        }
      }
    }
  }
}
</style>
